<template>
  <view class="list">
    <view
      v-for="(item, index) in data"
      :key="index"
      class="item"
      @click="go(item.id, item)"
    >
      <view class="content">
        <rich-text
          :nodes="hightLightText(item.title ? item.title : item.name, keyword)"
        ></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import { hightLightText } from "@/utils/utils.js";

export default {
  name: "searchList",
  props: {
    data: {
      type: Array,
      default: function () {
        return [];
      },
    },
    url: {
      type: String,
      default: "",
    },
    keyword: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      hightLightText: hightLightText,
    };
  },
  methods: {
    go(id, item) {
      if (this.url == "no") {
        this.$emit("goUrl", item);
        return;
      }
      uni.navigateTo({
        url: `${this.url}?id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff !important;
}
.list {
  .item {
    z-index: 1000;
    width: 100%;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #e4e7ed;
    background-color: #f7f7f7;
    font-size: 28rpx;
    .content {
      width: 690rpx;
      height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
em {
  font-style: normal;
  color: #fa3534;
}
</style>
